<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>CPU</span>
          </div>
          <div>
            <el-form>
              <el-form-item label="核心数：">{{ server.cpu.cpuNum || '' }}</el-form-item>
              <el-form-item label="用户使用率：	">{{ server.cpu.used || '' }}%</el-form-item>
              <el-form-item label="系统使用率	：">{{ server.cpu.sys || '' }}%</el-form-item>
              <el-form-item label="当前空闲率	：">{{ server.cpu.free || '' }}%</el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>内存</span>
          </div>
          <div>
            <el-form>
              <el-form-item label="总内存：">{{ server.mem.total || '' }}G</el-form-item>
              <el-form-item label="已用内存：	">{{ server.mem.used || '' }}G</el-form-item>
              <el-form-item label="剩余内存	：">{{ server.mem.free || '' }}G</el-form-item>
              <el-form-item label="使用率	：">{{ server.mem.usage || '' }}%</el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>jvm</span>
          </div>
          <div>
            <el-form>
              <el-form-item label="总内存：">{{ server.jvm.total || '' }}M</el-form-item>
              <el-form-item label="已用内存：	">{{ server.jvm.used || '' }}M</el-form-item>
              <el-form-item label="剩余内存	：">{{ server.jvm.free || '' }}M</el-form-item>
              <el-form-item label="使用率	：">{{ server.jvm.usage || '' }}%</el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>服务器信息</span>
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="服务器名称	：">{{ server.sys.computerName || '' }}</el-form-item>
                  <el-form-item label="操作系统：	">{{ server.sys.osName || '' }}</el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="服务器IP	：">{{ server.sys.computerIp || '' }}</el-form-item>
                  <el-form-item label="系统架构	：">{{ server.sys.osArch || '' }}</el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Java虚拟机信息</span>
          </div>
          <div>
            <el-row>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="Java名称	：">{{ server.jvm.name || '' }}</el-form-item>
                  <el-form-item label="Java版本：	">{{ server.jvm.version || '' }}</el-form-item>
                  <el-form-item label="启动时间：	">{{ server.jvm.startTime || '' }}</el-form-item>

                </el-form>
              </el-col>
              <el-col :span="12">
                <el-form>
                  <el-form-item label="运行时长	：">{{ server.jvm.runTime || '' }}</el-form-item>
                  <el-form-item label="安装路径	：">{{ server.jvm.home || '' }}</el-form-item>
                  <el-form-item label="项目路径	：">{{ server.sys.userDir || '' }}</el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>磁盘状态</span>
          </div>
          <el-table v-loading="loading" :data="server.sysFiles" size="small">
            <el-table-column prop="dirName" label="盘符路径"/>
            <el-table-column prop="sysTypeName" label="文件系统"/>
            <el-table-column prop="typeName" label="盘符类型	"/>
            <el-table-column prop="total" label="总大小"/>
            <el-table-column prop="free" label="可用大小"/>
            <el-table-column prop="used" label="已用大小"/>
            <el-table-column prop="usage" label="已用百分比">
              <template slot-scope="scope">
                <span :class="scope.row.usage>80?'danger':''">{{ scope.row.usage+'%' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getServer} from '@/api/framework/server/server'
  import SockJS from "sockjs-client";
  import Stomp from "stompjs";
  import {getToken} from '@/utils/auth'
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        loading: false,
        server: {
          cpu: {},
          jvm: {},
          sys: {},
          mem: {},
          sysFiles: null
        }
      }
    },
    computed: {
      ...mapGetters([
        'baseApi'
      ])
    },
    created() {
      this.$nextTick(() => {
        this.initServer()
      })
    },
    mounted() {
      this.initWebSocket()
    },
    beforeDestroy() {
      // 页面离开时断开连接,清除定时器
      this.disconnect()
      clearInterval(this.timer)
    },
    methods: {
      initServer() {
        this.loading = true
        getServer().then(res => {
          this.server = res
        })
        this.loading = false
      },
      initWebSocket() {
        this.connection()
        const that = this
        // 断开重连机制,尝试发送消息,捕获异常发生时重连
        this.timer = setInterval(() => {
          try {
            that.stompClient.send('test')
          } catch (err) {
            console.log('断线了: ' + err)
            that.connection()
          }
        }, 5000)
      },
      connection() {
        // 建立连接对象
        const socket = new SockJS(this.baseApi + '/websocket')
        // 获取STOMP子协议的客户端对象
        this.stompClient = Stomp.over(socket)
        // 定义客户端的认证信息,按需求配置
        const headers = {
          'Authorization': 'Bearer ' + getToken()
        }
        // 向服务器发起websocket连接
        this.stompClient.connect(headers, () => {
          this.stompClient.subscribe('/topic/server', (event) => {
            var content = JSON.parse(event.body)
            this.server = content
          }, headers)
        }, (err) => {
          // 连接发生错误时的处理函数
          console.log('失败')
          console.log(err)
        })
      },
      disconnect() {
        if (this.stompClient) {
          this.stompClient.disconnect()
        }
      }
    }

  }
</script>
<style scoped>
  .danger {
    color: red;
  }
</style>
